Web 制作やシステム開発の現場で、「スマートフォンのアプリも作れないか」と相談されることが増えています。当社でも、iOS アプリの開発や、業務システムと連携するアプリの開発を行っています。
そこで、Web やサーバーの開発経験がある技術者の方に向けて、全 6 回の Flutter 入門講座を始めます。最終回までに、次のような「メモアプリ」を一緒に作ります。
第 1 回は、Flutter で何ができるのかを整理し、開発環境を作って最初のアプリを動かすところまで進めます。
この講座のコードは、手元の Flutter 3.41（Dart 3.11）で解析とテストを通して確認しています。2026年11月時点の最新の安定版は、2026年8月に公開された Flutter 3.47 です。基本的な書き方は同じですが、細かな画面や設定はバージョンによって変わることがあります。
Flutter とは
Flutter は、Google が開発しているアプリ開発の仕組み（フレームワーク）です。1 つのコードから、iOS・Android のアプリ、Web、Windows・macOS・Linux のデスクトップアプリを作れます。プログラミング言語には Dart を使います。
React Native などとの違い: 画面を自分で描く
クロスプラットフォームの仕組みはいくつかありますが、Flutter の特徴は、ボタンや文字などの画面の部品を、OS の部品を借りずに Flutter 自身が描くことです。
- iOS でも Android でも、見た目と動きがそろいやすい
- 部品の見た目を細かく変えやすい（デザインの自由度が高い）
- 開発中は、保存するとすぐに画面に反映されるホットリロードが使える
一方で、OS の最新の部品や機能をすぐに使いたいときは、Swift（iOS）や Kotlin（Android）のコードと連携する必要が出ることもあります。
Web の技術者から見た Flutter
Web の開発経験がある方は、次のように置き換えると理解しやすいと思います。
Web | Flutter |
|---|---|
HTML の要素・コンポーネント | ウィジェット（Widget） |
CSS のレイアウト（flex） | Row・Column・Padding などのウィジェット |
React の state・useState | State と setState（第 4 回） |
fetch・axios | http パッケージ（第 5 回） |
npm と package.json | pub と pubspec.yaml |
localStorage | shared_preferences（第 5 回） |
開発環境を作る
必要なもの
作りたいもの | 必要なもの |
|---|---|
Android アプリ | Android Studio（Android SDK とエミュレーター） |
iOS アプリ | Mac と Xcode、CocoaPods（Windows では iOS アプリはビルドできません） |
Web | Google Chrome |
どれでも共通 | Flutter SDK と、エディター（この講座では VS Code） |
おすすめの方法: VS Code の Flutter 拡張機能から入れる
Flutter の公式ドキュメントでは、VS Code（または Code OSS 系のエディター）の Flutter 拡張機能を使って、Flutter SDK のダウンロード・PATH の設定・確認までを進める方法を案内しています。
- VS Code をインストールする
- 拡張機能から Flutter（Dart Code 提供）をインストールする
- コマンドパレット（Mac は
⌘ + Shift + P、Windows はCtrl + Shift + P）で 「Flutter: New Project」 を実行する - SDK が見つからないと案内が出るので、SDK をダウンロードし、保存先を選ぶ
- 案内に従って、PATH に Flutter を追加する
手動で入れる場合は、公式サイトから自分の OS 用の安定版の SDK をダウンロードして展開し、flutter/bin を PATH に追加します。
iOS 向けの準備（Mac のみ）
App Store から Xcode を入れた後、ターミナルで次のコマンドを実行します。
sudo sh -c 'xcode-select -s /Applications/Xcode.app/Contents/Developer && xcodebuild -runFirstLaunch'
sudo xcodebuild -licenseプラグイン（端末の機能を使うパッケージ）のために、CocoaPods も入れておきます。
Android 向けの準備
Android Studio を入れて起動し、案内に従って Android SDK をインストールします。Android Studio の「Device Manager」からエミュレーター（仮想の Android 端末）を 1 台作っておきましょう。
flutter doctor で確認する
準備ができたら、ターミナルで flutter doctor を実行します。足りないものがあれば教えてくれます。
flutter doctor当社の開発用 Mac で実行した結果がこちらです（一部を省略しています）。
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.41.4, on macOS 26.6.2 25G83 darwin-arm64, locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 36.0.0)
✗ cmdline-tools component is missing.
Try installing or updating Android Studio.
✗ Android license status unknown.
Run `flutter doctor --android-licenses` to accept the SDK licenses.
[✓] Xcode - develop for iOS and macOS (Xcode 27.2)
[✓] Chrome - develop for the web
[✓] Connected device (4 available)
[✓] Network resources
! Doctor found issues in 1 category.[✓] は準備ができている項目、[!] は足りないものがある項目です。この例では Android の準備が足りていません。表示されているとおり、Android Studio の「SDK Manager」で Android SDK Command-line Tools を入れ、次のコマンドでライセンスに同意すれば解消します。
flutter doctor --android-licensesすべてを [✓] にする必要はありません。iOS だけ作るなら Android の項目が `[!]` のままでも大丈夫です。
「講座を読んで作り始めたが、ここから先はプロに任せたい」というご相談も歓迎です
最初のアプリを作って動かす
プロジェクトを作る
VS Code の「Flutter: New Project」→「Application」を選ぶか、ターミナルで次のように実行します。
flutter create --org jp.co.example memo_app
cd memo_app--org は、アプリの ID（iOS のバンドル ID・Android のアプリケーション ID）の前半になります。会社のドメインを逆にしたものを指定するのが一般的です。
できあがるファイル
ファイル・フォルダ | 役割 |
|---|---|
| アプリのコード。最初はここだけ見れば大丈夫です |
| アプリ名・バージョン・使うパッケージ（Web の package.json に相当） |
| それぞれの OS 向けのプロジェクト。リリースのときに設定します |
| テストのコード（第 6 回） |
起動する
エミュレーターや iPhone シミュレーターを起動して、次のコマンドを実行します。VS Code なら、右下で端末を選んで F5 でも起動できます。
flutter devices # 使える端末の一覧
flutter run # アプリを起動カウンターのサンプルアプリが起動したら成功です。
ホットリロードを試す
lib/main.dart を開き、テーマの色を変えて保存してみてください（ターミナルから起動した場合は r キー）。
theme: ThemeData(
colorScheme: .fromSeed(seedColor: Colors.deepPurple),
),Colors.deepPurple を Colors.green に変えて保存すると、アプリを止めずに、カウンターの数字もそのままで色だけが変わります。これがホットリロードです。
ちなみに、.fromSeed の先頭の . は、Dart 3.10 で入った dot shorthands（型が分かっている場所で ColorScheme. を省略できる書き方）です。古い記事では ColorScheme.fromSeed(...) と書かれていますが、意味は同じです。
つまずきやすいところ
- Windows では iOS アプリを作れない: iOS のビルドには Mac と Xcode が必要です
- Android のライセンス:
flutter doctor --android-licensesで同意が必要です - iOS の対応バージョン（デプロイメントターゲット）: 当社の環境（Xcode 27.2）では、
flutter createが設定する iOS 13.0 のままではシミュレーター向けのビルドが止まり、15.0 以上への変更が必要でした。Xcode と Flutter のバージョンの組み合わせで変わるため、エラーの文面を確認してください（第 6 回でも触れます） - 会社のネットワーク: プロキシのある環境では、パッケージのダウンロードで止まることがあります
まとめ
- Flutter は、1 つの Dart のコードから iOS・Android・Web・デスクトップのアプリを作れる仕組みです
- 画面の部品を Flutter 自身が描くので、OS によらず見た目がそろいやすく、ホットリロードで素早く試せます
- 開発環境は、VS Code の Flutter 拡張機能から作るのがおすすめです。
flutter doctorで足りないものを確認しましょう flutter createでプロジェクトを作り、flutter runで起動、保存するとホットリロードで反映されます
次回（第 2 回）は、Flutter で使う言語 Dart の基本文法を、Web の技術者向けに駆け足で解説します。
Flutter 入門講座（全 6 回）
- Flutter とは？できることと開発環境の作り方（この記事・11月9日）
- Dart の基本文法（11月10日公開予定）
- ウィジェットで画面を作る（11月11日公開予定）
- 状態管理の第一歩（11月12日公開予定）
- API からデータを取得し、端末に保存する（11月13日公開予定）
- 画面遷移・テスト・リリースまで（11月14日公開予定）
アプリの企画段階からのご相談も承ります。フォームは 24 時間受付です
※ Flutter・Dart・Android・Google Play は Google LLC の商標です。iOS・Xcode・App Store は Apple Inc. の商標です。
参考
- Flutter 公式ドキュメント「Install Flutter」
- Flutter 公式ドキュメント「Set up macOS development」
- Flutter 公式ドキュメント「What's new」
